<template>
	<div class="headerto">
		<!--面包屑-->
		<div class="crumbs">
			<i class="iconfont icon-caidan" :class="onoffSide ? 'rotate' : ''" @click="tap_nav"></i>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: item.path}" v-for="(item,index) in breadcrumb" :key="index">{{item.meta.title}}</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button icon="el-icon-refresh" circle @click="Refresh" style="margin-left: 20px; font-size: 12px;color: red;"
			 size="mini" :loading="loading"></el-button>
		</div>

		<div class="right">
			<div class="right-top">
				<el-dropdown @command="handleCommand" trigger="click">
					<span class="el-dropdown-link" v-if="userInfo">
						<span class="lz-username">( {{userInfo.userName||userInfo.loginName}} )</span>
						<span>个人中心</span>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<span class="el-dropdown-link" v-else="">
						<span class="lz-username-red">( 未登录 )</span>
						<span>个人中心</span>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<!-- <el-dropdown-item command="a">个人信息</el-dropdown-item>
						<el-dropdown-item command="b">修改密码</el-dropdown-item> -->
						<el-dropdown-item command="c">退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	//非父子组件传值
	import bus from '../../../static/js/bus.js';
	export default {
		name: 'headerto',
		computed: {
			...mapGetters(['userInfo', 'api']) //获取
		},
		props: ['onoffSide'], //接收父级传来的侧边收缩
		data() {
			return {
				loading: false,
				orgInfo: {},
				activeIndex: '1', //当前激活的
				onoff_Side: '',
				breadcrumb:[], //面包屑
				transitionName: ''
			};
		},
		watch: {
		  $route() {
		    this.getBreadcrumb()
		  }
		},
		
		mounted() {

			// let arr = {
			// 	name: this.$route.meta.parent_name,
			// 	name_child: this.$route.meta.title,
			// 	path: this.$route.path
			// };
			// this.breadcrumb = arr;
			this.getBreadcrumb()
		},
		methods: {
			...mapActions(['set_LogOut', 'delAllViews', 'set_orgInfo', 'set_isChangePassword']),
			//计算面包屑
			getBreadcrumb() {
				let that =this
				let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
				console.log(matched);
				that.breadcrumb=matched
			},
			//点击侧边收缩
			tap_nav() {
				this.onoff_Side = this.onoffSide;
				this.onoff_Side = !this.onoff_Side;
				this.$emit('sideContractile', this.onoff_Side);
			},
			//跳转首页
			home_page() {
				this.$router.push({
					name: 'index',
					path: '/index'
				});
			},
			//退出登录
			handleCommand(e) {
				let that = this;
				if (e == 'a') {
					that.$router.push({
						name: 'myInfo',
						path: '/myInfo'
					});
				} else if (e == 'b') {
					that.$router.push({
						name: 'changePassword',
						path: '/changePassword'
					});
				} else if (e == 'c') {
					this.set_isChangePassword(false) //密码策略false为不需要修改密码

					this.$confirm('是否退出此账号?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
						.then(() => {
							bus.$emit('checkOut');
							that.logout()
							that.set_LogOut('')
							that.$nextTick(() => {
								that.$router.push({
									name: 'login',
									path: '/login'
								});
							})

						})
						.catch(() => {});
				}
			},
			//登出接口
			logout() {
				let that = this;
				that.GLOBAL.doPost(that.api.GLOBAL_account_logout, {}, function(res) {

				});
			},
			//刷新
			Refresh() {
				let that = this
				bus.$emit('refreshPage', true)
				that.loading = true
				setTimeout(() => {
					that.loading = false
				}, 1000)
			}
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.headerto {
		display: flex;
		justify-content: space-between;

		.crumbs {
			height: 60px;
			display: flex;
			align-items: center;
			z-index: 1;

			.iconfont {
				cursor: pointer;
				font-size: 28px;
			}

			.el-breadcrumb {
				line-height: 60px;
				margin-left: 20px;
			}

			.rotate {
				transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				/* IE 9 */
				-moz-transform: rotate(90deg);
				/* Firefox */
				-webkit-transform: rotate(90deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(90deg);
				/* Opera */
			}

			.el-icon-refresh {
				margin-left: 20px;
				font-size: 18px;
				cursor: pointer;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.right-top {

				// height:30px;line-height: 30px;
				.el-dropdown-link {
					cursor: pointer;

					.lz-username {
						color: #13CE66;
						font-size: 12px;
					}

					.lz-username-red {
						color: red;
						font-size: 12px;
					}
				}
			}

		}
	}
</style>
